import React, { PureComponent } from 'react';
import {
   Tabs,
   Grid,
   Flex,
    Icon
} from 'antd-mobile';
import Img from '../../components/Img/Img';
import { routerRedux } from 'dva/router';
import { goods_list, grid_item } from './GoodsList.less'




const renderItem = (dataItem) => {
  return (
      <Flex  className="ro_Item" direction="column" >
          <div style={{ border:'0.01rem solid #ebebeb' }} className="img">
            <Img  src={dataItem.image || dataItem.goodsimage || dataItem.goodsPrice} />
          </div>


            <div  className="text-two-eli">{dataItem.name || dataItem.goodsName}</div>


        <div style={{ fontSize: '.28rem', color: '#ff0036' }}>￥{parseFloat(dataItem.price || dataItem.storePrice || dataItem.goodsPrice).toFixed(2)}</div>

      </Flex>
  );
};

/**
 * 商品更多信息
 * @param {*} param0
 */
// export default function({ goodsDetailInfo }) {
//   return <Tabs defaultActiveKey="1" activeTextColor='#E43F47 ' activeUnderlineColor='#E43F47 ' swipeable={false} >
//     <TabPane tab="猜你喜欢" key="1">
//       {
//         goodsDetailInfo.recommendList &&
//         <Grid
//           onClick={onClick}
//           renderItem={(dataItem, index) => (renderItem(dataItem))}
//           data={goodsDetailInfo.recommendList} columnNum={3} >
//       </Grid>
//       }
//     </TabPane>
//     <TabPane tab="排行榜" key="2">
//
//     </TabPane>
//   </Tabs>
// }
export default class GoodsList extends PureComponent {

    onClick = (el) => {
        console.log(el, "el");
        this.props.dispatch(routerRedux.replace(`/goodsDetail/${el.specId}`))
    };

  render () {
    const { recommendList = [], orderList = [], dispatch, storeId } = this.props;

    return (
        <div className={goods_list}>
          <Tabs
              swipeable={false}
              tabs={[
                  { title: <span style={{lineHeight:".4rem",width:"100%",textAlign:"center",borderRight:"1px solid #e5e5e5"}}>为你推荐</span> },
                  { title: '排行榜' },
              ]}
              // initalPage="t2"
          >

              <div>
                  {
                      recommendList[0] ?  <div>
                              <Grid
                                  onClick={ this.onClick }
                                  className={grid_item}
                                  renderItem={(dataItem, index) => (renderItem(dataItem))}
                                  data={ recommendList }
                                  columnNum={3}
                                  isCarousel={true}
                                  carouselMaxRow={recommendList.length > 3 ? 2 : 1}
                                  hasLine={false}
                              />
                              <div className="footer"
                                   onClick={()=>{
                                       dispatch(routerRedux.push(`/recommends`))
                                   }}
                              >
                                  查看更多为你推荐<Icon style={{width:".2rem",height:".2rem"}} type="right" />
                              </div>
                          </div>
                          :  <div style={{textAlign:"center", padding: recommendList[0] ? "0 .5rem" : "", fontSize:".35rem"}}>
                              <div style={{width: "100%", height: "3.6rem", background: "#f6f6f6", paddingTop: '.5rem'}}>
                                  <img src={ require('../../assets/img/noGoods.png')} style={{display: "block", margin: "0rem auto 0"}} />
                                  <p style={{fontSize: ".24rem", padding: ".2rem 0 .3rem", textAlign: "center", color: "#b9b9b9"}}>当前暂无推荐商品...</p>
                              </div>
                          </div>

                  }

              </div>

              <div>

                  {
                      orderList[0] ?
                      <div>
                          <Grid
                              onClick={ this.onClick }
                              className={grid_item}
                              renderItem={(dataItem, index) => (renderItem(dataItem))}
                              data={ orderList }
                              columnNum={3}
                              isCarousel={true}
                              carouselMaxRow={orderList.length > 3 ? 2 : 1}
                              hasLine={false}
                          />
                          <div className="footer"
                               onClick={()=>{
                                   dispatch(routerRedux.push(`/rank/${storeId}`))

                               }}
                          >
                              查看更多排行榜<Icon style={{width:".2rem",height:".2rem"}} type="right" />
                          </div>
                      </div> :
                      <div style={{textAlign:"center",padding: recommendList[0] ? "0 .5rem" : "",fontSize:".35rem"}}>
                          <div style={{width: "100%", height: "3rem", background: "#f6f6f6", paddingTop: '.5rem'}}>
                              <img src={ require('../../assets/img/noGoods.png')} style={{display: "block", margin: "0rem auto 0"}} />
                              <p style={{fontSize: ".24rem", padding: ".2rem 0 .3rem", textAlign: "center", color: "#b9b9b9"}}>当前暂无排行商品...</p>
                          </div>
                      </div>
                  }


              </div>
          </Tabs>


        </div>
    );
  }
}
